<template>
	<view>
		<view class="nav acea-row row-around">
			<view class="item" :class="orderStatus == 0 ? 'on' : ''" @click="statusClick(0)">
				<view>{{$t(`身高曲线`)}}</view>
			</view>
			<view class="item" :class="orderStatus == 1 ? 'on' : ''" @click="statusClick(1)">
				<view>{{$t(`体重曲线`)}}</view>
			</view>
			<view class="item" :class="orderStatus == 2 ? 'on' : ''" @click="statusClick(2)">
				<view>{{$t(`头围曲线`)}}</view>
			</view>
			<view class="item" :class="orderStatus == 4 ? 'on' : ''" @click="statusClick(4)">
				<view>{{$t(`BMI曲线`)}}</view>
			</view>
		</view>
		<!-- <form>
			<view class='personal-data' :style="colorStyle">
				<view class='list'>
					<view class="item acea-row row-between-wrapper">
						<view>{{$t(`曲线类型`)}}</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" range-key="name" :range="arrayLabel">
								<view class="uni-input input">{{arrValue}}<text
										class="iconfont icon-xiangyou"></text></view>
							</picker>
						</view>
					</view>
					<view class="item acea-row row-between-wrapper">
						<view>{{$t(`x、y轴类型`)}}</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChangeAxle" range-key="name" :range="axle">
								<view class="uni-input input">{{axleValue}}<text
										class="iconfont icon-xiangyou"></text></view>
							</picker>
						</view>
					</view>
				</view>
				<view class="verify" @click="queryCurve()">{{$t(`查询曲线`)}}</view>
			</view>	
		</form> -->
		
		<!-- 第一个曲线 -->
		<view v-if="uCharsState">
			<view class="charts-box" >
			   <Uchars
			   type="tline"
			   :opts="opts"
			   :chartData="chartData"
			   :ontouch="true"
			    tooltipFormat="tooltipDemo1"
			   >
			   </Uchars>
			 </view>
			 <view class="proportion country">
			 	根据2005年中国九市儿童体格发育调查数据研究制定，参考文献：中华儿科杂志，2009年3期
			 </view>
			 <view class="proportion">
			 	{{info.field_name}}({{info.y_unit_name}}/{{info.x_unit_name}})
			 </view>
			 <view class="amplify-css" @click="amplifyChilk(opts,chartData.series,info)">
			 	<text>放大查看</text>
			 </view>
			 <view class="help" @click="helpChilk(info.article_cate_id)">
			 	帮助指南
			 </view> 
		</view>
		<!-- 第二个曲线 -->
		<view v-if="uCharsState1">
			<view class="charts-box" >
			   <Uchars
			   type="tline"
			   :opts="opts1"
			   :chartData="chartData1"
			   :ontouch="true"
			    tooltipFormat="tooltipDemo1"
			   >
			   </Uchars>
			 </view>
			 <view class="proportion country">
			 	根据2005年中国九市儿童体格发育调查数据研究制定，参考文献：中华儿科杂志，2009年3期
			 </view>
			 <view class="proportion">
			 	{{info1.field_name}}({{info1.y_unit_name}}/{{info1.x_unit_name}})
			 </view>
			 <view class="amplify-css" @click="amplifyChilk(opts1,chartData1.series,info1)">
			 	<text>放大查看</text>
			 </view>
			 <view class="help" @click="helpChilk(info1.article_cate_id)">
			 	帮助指南
			 </view> 
		</view>
		
	</view>
</template>

<script>
	import Uchars from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	import { SingleCurce } from '@/api/baby.js';
	export default {
		components:{
			Uchars
		},
		data() {
			return {
				orderStatus:0,
				/* 曲线1 */
				uCharsState:false,
				info:'',
				chartData: {
					series: []
				},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
				padding: [25,30,0,0],
				dataLabel: false,
				canvas2d:true,
				enableMarkLine: true,
				legend:{
					show:true,
					position:"top"
				},
				xAxis: {
				  splitNumber:9,	
				  calibration:false,
				  gridType:'dash',
				  disableGrid: false,
				  itemCount: 5,
				  titlePop:'',
				  limit_x:'',
				},
				extra: {
				  markLine:{
					  type: "solid",
					  dashLength: 2,
					  data:[]
				  },	
				  tooltip: {
					  legendShow:false
				  },
				  line: {
					type: "straight",
					width: 1,
					activeType: "solid"
				  }
				},
				yAxis: {
					showTitle:true,
				    gridType: "dash",
					dashLength: 2,
					splitNumber:10,
					data: [
					  {
						tofix:1,
						title:'',
						min: '',
						max: '',
					  }
					]
				 }
				},
				/* 曲线2 */
				uCharsState1:false,
				info1:'',
				chartData1: {
					series: []
				},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts1: {
				padding: [25,30,0,0],
				dataLabel: false,
				canvas2d:true,
				enableMarkLine: true,
				legend:{
					show:true,
					position:"top"
				},
				xAxis: {
				  splitNumber:9,
				  calibration:false,
				  gridType:'dash',
				  disableGrid: false,
				  itemCount: 5,
				  titlePop:'',
				  limit_x:'',
				},
				extra: {
				  markLine:{
					  type: "solid",
					  dashLength: 2,
					  data:[]
				  },	
				  tooltip: {
					  legendShow:false
				  },
				  line: {
					type: "straight",
					width: 1,
					activeType: "solid"
				  }
				},
				yAxis: {
					showTitle:true,
				    gridType: "dash",
					dashLength: 2,
					splitNumber:10,
					data: [
					  {
						tofix:1,
						title:'',
						min: '',
						max: '',
					  }
					]
				 }
				},
				
				/* 曲线类型 */
				arrValue:'选择曲线类型',
				arrType:'',
				arrayLabel:[{
					name:'百分位',
					type:0
				},{
					name:'标准差法',
					type:1
				}],
				/* x、y轴 */
				axleValue:'请选择x、y轴类型',
				axleType:'',
				axle:[{
					name:'身高/年龄',
					statistics_type:0
				},{
					name:'体重/年龄',
					statistics_type:1
				},{
					name:'头围/年龄',
					statistics_type:2
				},{
					name:'体重/身高',
					statistics_type:3
				},{
					name:'BMI/年龄',
					statistics_type:4
				}],
				baby_log_id:'',
			}
		},
		onLoad:function(options){
			this.baby_log_id = options.id
			this.queryCurve(0,0)
			this.queryCurve1(0,1)
		},
		methods: {
			/* 放大 */
			amplifyChilk:function(A1,A2,A3){
				uni.navigateTo({url:'/pages/babys/amplify_uchars?opts=' + JSON.stringify(A1) + '&series=' + JSON.stringify(A2) + '&info=' + JSON.stringify(A3)})
			},
			/**
			 * 切换类型
			 */
			statusClick: function(status) {
				this.orderStatus = status;
				this.queryCurve(status,0)
				this.queryCurve1(status,1)
			},
			/* 跳转帮助指南 */
			helpChilk:function(id){
				uni.navigateTo({url:'/pages/extension/news_list/index?id=' + id})
			},
			/* 查询曲线 */
			queryCurve:function(statistics_type,arrType){
				let that = this;
				SingleCurce({
					baby_log_id:that.baby_log_id,
					type:arrType,
					statistics_type:statistics_type,
				}).then(res => {

					that.info = res.data
					that.chartData.series = []
					that.opts.yAxis.data[0].min = parseFloat(res.data.min_y) 
					that.opts.yAxis.data[0].max = parseFloat(res.data.max_y) 
					that.opts.yAxis.data[0].title = res.data.y_unit_name
					that.opts.xAxis.titlePop =  res.data.x_unit_name
					that.opts.xAxis.limit_x = res.data.limit_x
					
					/* 用户自己的记录 */
					if(res.data.user_data.length != 0){
						const user = [];  
						res.data.user_data.forEach(item => {  
						    const [x, y] = [parseFloat(item.x, 10), parseFloat(item.y, 10)];  
						    user.push([x, y]);  
						});
						let userObj = {
							name: "我的宝宝",
							color:'#DF0029',
							data:user,
							extra:{
								line:{
									width: 4,
								}
							}
						}
						that.chartData.series.push(userObj)
					}
					
					let Color = ['#F09C42','#F3C246','#FF8FB9','#1B4F93','#511F90','#C57CAC','#00AE72','#00B2BF','#000000','#64004B']
					for (var i = 0; i < res.data.levels_name.length; i++) {
						
						if(res.data.samples_data[res.data.levels_name[i]] && res.data.levels_name[i] in res.data.samples_data){
							const processedData = [];  
							
							
							res.data.samples_data[res.data.levels_name[i]].forEach(item => {  
							    const [x, y] = [parseFloat(item.x, 10), parseFloat(item.y, 10)];  
							    processedData.push([x, y]);  
							});
							
							let obj = {
								pointShape:'none',
								name: res.data.levels_name[i],
								color:Color[i],
								data:processedData
							}
							
							that.chartData.series.push(obj)
						}
					}
					/* 标记线 */
					that.opts.extra.markLine.data = []
					for (var j = 0; j < res.data.levels_name.length; j++) {
						let Marker = {
							value: parseFloat(res.data.samples_data[res.data.levels_name[j]][res.data.samples_data[res.data.levels_name[j]].length - 1].y),
							lineColor: "rgba(0,0,0,0)",
							showLabel: true,
							labelAlign: "right",
							labelOffsetX: 2,
							labelFontSize:8,
							labelPadding: 1,
							labelText: res.data.levels_name[j],
							labelFontColor: Color[j],
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0
						}
						that.opts.extra.markLine.data.push(Marker)
					}
					
					that.uCharsState = true
					
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			},
			/* 查询曲线2 */
			queryCurve1:function(statistics_type,arrType){
				let that = this;
				SingleCurce({
					baby_log_id:that.baby_log_id,
					type:arrType,
					statistics_type:statistics_type,
				}).then(res => {
			
					that.info1 = res.data
					that.chartData1.series = []
					that.opts1.yAxis.data[0].min = parseFloat(res.data.min_y) 
					that.opts1.yAxis.data[0].max = parseFloat(res.data.max_y) 
					that.opts1.yAxis.data[0].title = res.data.y_unit_name
					that.opts1.xAxis.titlePop =  res.data.x_unit_name
					that.opts1.xAxis.limit_x = res.data.limit_x
					
					/* 用户自己的记录 */
					if(res.data.user_data.length != 0){
						const user1 = [];  
						res.data.user_data.forEach(item => {  
						    const [x, y] = [parseFloat(item.x, 10), parseFloat(item.y, 10)];  
						    user1.push([x, y]);  
						});
						let userObj1 = {
							name: "我的宝宝",
							color:'#DF0029',
							data:user1,
							extra:{
								line:{
									width: 4,
								}
							}
						}
						that.chartData1.series.push(userObj1)
					}
					
					let Color1 = ['#F09C42','#F3C246','#FF8FB9','#1B4F93','#511F90','#C57CAC','#00AE72','#00B2BF','#000000','#64004B']
					for (var i = 0; i < res.data.levels_name.length; i++) {
						
						if(res.data.samples_data[res.data.levels_name[i]] && res.data.levels_name[i] in res.data.samples_data){
							const processedData1 = [];  
							
							
							res.data.samples_data[res.data.levels_name[i]].forEach(item => {  
							    const [x, y] = [parseFloat(item.x, 10), parseFloat(item.y, 10)];  
							    processedData1.push([x, y]);  
							});
							
							let obj1 = {
								pointShape:'none',
								name: res.data.levels_name[i],
								color:Color1[i],
								data:processedData1
							}
							
							that.chartData1.series.push(obj1)
						}
					}
					/* 标记线 */
					that.opts1.extra.markLine.data = []
					for (var j = 0; j < res.data.levels_name.length; j++) {
						let Marker1 = {
							value: parseFloat(res.data.samples_data[res.data.levels_name[j]][res.data.samples_data[res.data.levels_name[j]].length - 1].y),
							lineColor: "rgba(0,0,0,0)",
							showLabel: true,
							labelAlign: "right",
							labelOffsetX: 2,
							labelFontSize:8,
							labelPadding: 1,
							labelText: res.data.levels_name[j],
							labelFontColor: Color1[j],
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0
						}
						that.opts1.extra.markLine.data.push(Marker1)
					}
					
					that.uCharsState1 = true
					
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			},
			
			bindPickerChange: function(e) {
				this.arrValue = this.arrayLabel[e.detail.value].name
				this.arrType = this.arrayLabel[e.detail.value].type
			},
			bindPickerChangeAxle:function(e){
				this.axleValue = this.axle[e.detail.value].name
				this.axleType = this.axle[e.detail.value].statistics_type
			},
		}
	}
</script>

<style lang="scss">
.nav {
	background-color: #FFFFFF;
	height: 90rpx;
	margin: 0 auto 0 auto;
}

.nav .item {
	text-align: center;
	font-size: 26rpx;
	color: #282828;
	// width: 3rem;
	padding: 27rpx 0 18rpx 0;
	border-bottom: 5rpx solid transparent;
}

.nav .item.on {
	/* #ifdef H5 || MP */
	font-weight: bold;
	/* #endif */
	/* #ifdef APP-PLUS */
	color: #000;
	/* #endif */
	border-color: #FF8FB9;
}	
/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
   margin: 24rpx 0 0 0;	
   padding: 0 0 32rpx 0;
   background: #FFFFFF;	
   width: 100%;
   height: 400px;
}
.amplify-css{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16rpx 0 0 0;
	background: #FFFFFF;
	text{
		background: #FF8FB9;
		color: #FFFFFF;
		padding: 6rpx 14rpx;
		border-radius: 8rpx;
	}
}
.help{
	text-align: center;
	color: #3A62F1;
	padding: 12rpx 0 88rpx 0;
	background: #FFFFFF;
}
.proportion{
	padding: 0 18rpx 0 18rpx;
	text-align: center;
	width: 100%;
	background: #FFFFFF;
}
.country{
	padding: 0 36rpx 12rpx 36rpx;
	color: #FF8FB9;
}
.personal-data {
	padding-bottom: 50rpx;
}
.personal-data .list {
	margin-top: 15rpx;
	background-color: #fff;
}

.personal-data .list .item {
	padding: 30rpx 30rpx 30rpx 0;
	border-bottom: 1rpx solid #f2f2f2;
	margin-left: 30rpx;
	font-size: 28rpx;
	color: #282828;
}

.personal-data .list .item .phone {
	width: 160rpx;
	height: 56rpx;
	font-size: 24rpx;
	color: #fff;
	line-height: 56rpx;
	border-radius: 32rpx
}

.personal-data .list .item .pictrue {
	width: 88rpx;
	height: 88rpx;
}

.personal-data .list .item .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.personal-data .list .item .input {
	flex: 1;
	text-align: right;
	color: #868686;
	font-size: 28rpx;

	input {
		padding-right: 10rpx;
	}

	.icon-suozi {
		margin-left: 10rpx;
	}
}
.verify{
	margin:  52rpx auto 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FF8FB9;
	color: #FFFFFF;
	width: 556rpx;
	height: 88rpx;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
}
.personal-data .list .item .input .id {
	// width: 180rpx;
}

.personal-data .list .item .input .iconfont {
	font-size: 24rpx;
}
</style>
